<template>
  <div>
    <div class="carousel">
      <div class="block">
        <el-carousel trigger="click" height="150px">
          <el-carousel-item v-for="(item, index) in imgs" :key="index">
            <img :src="item.imgUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        {
          imgUrl: '/carousel1.png',
        },
        {
          imgUrl: '/carousel2.png',
        },
        {
          imgUrl: '/carousel3.png',
        },
      ],
    }
  },
}
</script>

<style scoped>
:deep(.el-carousel__container) {
  height: 250px !important;
}

:deep(.el-carousel__container img) {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
